<template>
  <div>
    <!-- 根据id显示不同的组件 -->
    <component ref="componentRef" :is="currentComponent" />
  </div>
</template>

<script setup>
import { ref, defineAsyncComponent, onMounted, computed } from "vue";
import { storeToRefs } from "pinia";
import { useMapStore } from "@/stores/map.ts";
import { nextTick } from "process";

const OlOpenMap = defineAsyncComponent(() =>
  import("./components/olOpenMap.vue")
);
const AmapOpenMap = defineAsyncComponent(() =>
  import("./components/amapOpenMap.vue")
);
const CesiumOpenMap = defineAsyncComponent(() =>
  import("./components/cesiumOpenMap.vue")
);
const ThreeDemo = defineAsyncComponent(()=>import("./components/threeDemo.vue"))
const componentRef = ref(null)
// 存储组件映射
const componentMap = {
  OlOpenMap: OlOpenMap,
  AmapOpenMap: AmapOpenMap,
  CesiumOpenMap: CesiumOpenMap,
  ThreeDemo:ThreeDemo
};
const mapStore = useMapStore();
const { mapId } = storeToRefs(mapStore);
console.log(mapId);
const data = ref({
  dynamicComponent: [
    {
      name: "OlOpenMap",
      id: 1,
    },
    {
      name: "AmapOpenMap",
      id: 2,
    },
    {
      name: "CesiumOpenMap",
      id: 3,
    },
    {
      name: "ThreeDemo",
      id: 4,
    },
  ],
});
// 根据当前ID获取组件
const currentComponent = computed(() => {
  if (mapId.value) {
    const selectedComponent = data.value.dynamicComponent.find(
      (item) => item.id === mapId.value
    );
    return componentMap[selectedComponent.name];
  }
});
onMounted(()=>{
  nextTick(()=>{
    console.log(componentRef);
  })
  
})
</script>

<style lang="scss" scoped></style>
